<template>
  <div class="me">
    <div class="login-wrap">
      <!-- 头部 -->
      <div class="login-header">
        <div class="user-img"></div>
        <div class="login">
          <h3 v-if="userInfo">{{userInfo._id}}</h3>
          <h3 @click="goLogin" v-else>登录/注册</h3>
          <p>
            <i class="fa fa-mobile"></i>
            <span v-if="userInfo">{{hiddenPhoneNumber(userInfo.phone)}}</span>
            <span v-else>登录后享受更多特权</span>
          </p>
        </div>
        <i class="fa fa-angle-right"></i>
      </div>
      <!-- 展示地址 -->
      <div class="user-address" @click="showAddress"><i class="fa fa-map-marker"></i>我的地址</div>
      <div class="logout">
        <button @click="handleLogout">退出登录</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyMe',
  data() {
    return {
      userInfo: null
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => vm.getLogin())
  },
  methods: {
    // 获取登录信息
    getLogin() {
      const userId = sessionStorage.getItem('ele_login')
      this.$http(`/api/user/user_info/${userId}`).then(res => {
        this.userInfo = res.data
        console.log(res.data)
      })
    },
    goLogin() {
      this.$router.push('/login')
    },
    // 隐藏部分手机号码
    hiddenPhoneNumber(phone) {
      return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
    },
    // 退出登录
    handleLogout() {
      sessionStorage.removeItem('ele_login')
      this.$router.push('/login')
    },
    // 展示地址
    showAddress() {
      console.log(this.userInfo)
      if (this.userInfo.myAddress.length > 0) {
        this.$router.push('myAddress')
      }
      else {
        this.$router.push({
          name: 'addAddress',
          params: {
            title: '添加地址',
            addressInfo: {
              name: '',
              sex: '',
              phone: '',
              address: '',
              bottom: '',
              tags: ''
            }
          }
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.login-wrap {
  .login-header {
    position: relative;
    display: flex;
    align-items: center;
    background-image: linear-gradient(90deg, #0af, #0085ff);
    padding: 25px 15px;
    color: #fff;
    .user-img {
      width: 60px;
      height: 60px;
      background-position: 0px 0px;
      background-size: 60px;
      border-radius: 50%;
      background-image: url(https://shadow.elemecdn.com/faas/h5/static/sprite.3ffb5d8.png);
    }
    .login {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left: 15px;
      line-height: 1.2;
      h3 {
        width: 170px;
        font-size: 22px;
        margin-bottom: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      p {
        margin: 0;
        i {
          margin-right: 5px;
          font-size: 20px;
          vertical-align: middle;
        }
      }
    }
    .fa-angle-right {
      position: absolute;
      right: 20px;
      top: 39px;
      font-size: 27px;
    }
  }
  .user-address {
    margin-top: 15px;
    background-color: #fff;
    padding: 15px 20px;
    i {
      color: skyblue;
      margin-right: 8px;
      vertical-align: middle;
    }
  }
  .logout {
    width: 100%;
    text-align: center;
    height: 45px;
    line-height: 45px;
    border: 1px solid #ccc;
    margin-top: 25px;
    background-color: #fff;
    button {
      width: 100%;
      color: red;
      border: none;
      background-color: #fff;
    }
  }
}
</style>
